@()(implicit flash: Flash)
<style>
		.registration-form input[type="text"], .registration-form input[type="password"], .registration-form input[type="email"] {
			padding: 10px 15px;
		}

		.has-feedback .form-control {
			padding-right: 42.5px;
		}
</style>
<!DOCTYPE html>

<html lang="en">
	<head>
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap-sweetalert-master/dist/sweetalert.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("public/bootstrapvalidator-master/dist/css/bootstrapValidator.min.css")">
		@*<link rel="stylesheet" media="screen" href="@routes.Assets.at("FormValidation/dist/css/formValidation.min.css")">*@
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap/css/bootstrap.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap/css/bootstrap-theme.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap/css/bootstrap-responsive.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("font-awesome-4.7.0/css/font-awesome.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/layout.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/components.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/uniform.default.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("simple-line-icons/simple-line-icons.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/page.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/doc.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap-table-master/dist/bootstrap-table.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("select2-4.0.3/dist/css/select2.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap-fileinput-master/css/fileinput.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/login-5.min.css")">
		<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/my.css")">
		<script src="@routes.Assets.at("bootstrap/js/jquery-3.1.1.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("layer-v3.0/layer/layer.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-sweetalert-master/dist/sweetalert.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/bootstrap-table.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("select2-4.0.3/dist/js/select2.full.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/bootstrap3-typeahead.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-fileinput-master/js/fileinput.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-fileinput-master/js/locales/zh.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/export/bootstrap-table-export.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/export/tableExport.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/multiple-search/bootstrap-table-multiple-search.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("jquery-backstretch-master/jquery.backstretch.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("jquery-ui-1.12.1/jquery-ui.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("bootstrapvalidator-master/dist/js/bootstrapValidator.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("FormValidation/dist/js/formValidation.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("FormValidation/dist/js/framework/bootstrap.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/gVerify.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/global.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/login.js")" type="text/javascript"></script>


	</head>
	<body class=" login">
		<style>
				.has-feedback .form-control {
					padding-right: 10px;
				}

		</style>
			<!-- BEGIN : LOGIN PAGE 5-2 -->
		<div class="user-login-5">
			<div class="row bs-reset">
				<div class="col-md-6 login-container bs-reset">

					@titleInfo()

					<div class="login-content">

						<div class="register">
							<h2 class="page-heading" style="font-size: 25px;">注册</h2>
						</div>
						<form id="form" style="max-width: 700px;" class="registration-form form-horizontal" accept-charset="UTF-8"
						method="post" action="@routes.AppController.register">

							<span class="@flash.get("class")" style="line-height: 35px;" id="error">@flash.get("info")
							</span>

							<div class="form-group">
								<label class="control-label col-sm-2">用户名:</label>
								<div class="col-sm-4">
									<input name="name" placeholder="用户名" autofocus="autofocus" class="form-control" required value=""/>
								</div>
								<label class="control-label col-sm-2">姓名:</label>
								<div class="col-sm-4">
									<input name="fullName" placeholder="姓名"  class="form-control" required value=""/>
								</div>

							</div>

							<div class="form-group">
								<label class="control-label col-sm-2">密码:</label>
								<div class="col-sm-4">
									<input name="password" placeholder="密码" type="password" class="form-control" required value=""/>
								</div>
								<label class="control-label col-sm-2">确认密码:</label>
								<div class="col-sm-4">
									<input name="confirmPassword" placeholder="确认密码" type="password" class="form-control" required value=""/>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-2">单位:</label>
								<div class="col-sm-4">
									<input name="unit" placeholder="单位"  class="form-control" required value=""/>
								</div>
								<label class="control-label col-sm-2">邮箱:</label>
								<div class="col-sm-4">
									<input name="email" placeholder="邮箱" autofocus="autofocus" class="form-control" required value=""/>
								</div>

							</div>

							<div class="form-group">
								<label class="control-label col-sm-2">手机:</label>
								<div class="col-sm-4">
									<input name="phone" placeholder="手机" autofocus="autofocus" class="form-control" required value=""/>
								</div>
							</div>


							<div class="form-group">
								<label class="control-label col-sm-2">验证码:</label>
								<div class="col-sm-4">
									<input name="captcha" placeholder="验证码" class="form-control" id="captcha"/>
								</div>
								<div class="col-sm-5" id="v_container" style="height: 34px;
									width: 180px">

								</div>
							</div>


							<div class="actions">
								<button class="btn btn-primary btn-lg" style="width: 100%" type="submit" >注册</button>
							</div>
						</form>

					</div>

					<div class="login-footer">
						<div class="row bs-reset">
							<div class="col-xs-12 bs-reset">
								<div class="login-copyright text-right">
									<p style="color: black">
										版权所有2018 深圳市绘云生物科技有限公司 All Rights Reserved
									</p>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div class="col-md-6 bs-reset">
					<div class="login-bg">
					</div>

				</div>
			</div>
		</div>
	</body>
</html>

<script>
		var verifyCode;
		$(function () {
			verifyCode = new GVerify("v_container");

			formValidation()

		})

		function formValidation() {
			$('#form').formValidation({
				framework: 'bootstrap',
				icon: {
					valid: 'glyphicon glyphicon-ok',
					invalid: 'glyphicon glyphicon-remove',
					validating: 'glyphicon glyphicon-refresh'
				},
				fields: {
					name: {
						validators: {
							notEmpty: {
								message: "用户名不能为空！"
							},
							remote: {
								message: "用户名已存在！",
								url: "@routes.AppController.userNameCheck",
								type: "POST",
								delay: 1000
							},
							regexp: {
								regexp: /^[^@@]*[^\d@@]+[^@@]*$/,
								message: '用户名不能为纯数字且不能含有@@！'
							},

						}
					},
					fullName: {
						validators: {
							notEmpty: {
								message: "姓名不能为空！"
							},

						}
					},
					unit: {
						validators: {
							notEmpty: {
								message: "单位不能为空！"
							},
						}
					},
					email: {
						validators: {
							notEmpty: {
								message: "邮箱不能为空！"
							},
							emailAddress: {
								message: '邮箱不合法！'
							},
							remote: {
								message: "邮箱已注册！",
								url: "@routes.AppController.emailCheck",
								type: "POST",
								delay: 1000
							}
						}
					},
					phone: {
						validators: {
							notEmpty: {
								message: "手机不能为空！"
							},
							regexp: {
							    regexp:/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
								message: '手机不合法！'
							},
							remote: {
								message: "手机已注册！",
								url: "@routes.AppController.phoneCheck",
								type: "POST",
								delay: 1000
							}
						}
					},
					password: {
						validators: {
							notEmpty: {
								message: "密码不能为空！"
							},
							identical: {
								field: 'confirmPassword',
								message: '两次密码不一样!'
							},
							regexp: {
								regexp:/^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])[\w]{6,}$/,
								message: '密码只能由数字和字母组成，必须同时包含大小写，且不小于6位！'
							},
						}
					},
					confirmPassword: {
						validators: {
							identical: {
								field: 'password',
								message: '两次密码不一样!'
							},
							notEmpty: {
								message: "确认密码不能为空！"
							},
						}
					},
					captcha: {
						validators: {
							notEmpty: {
								message: "验证码不能为空！"
							},
							blank: {}
						}
					}

				}

			}).on('success.form.fv', function (e) {
				e.preventDefault();
				var $form = $(e.target),
						fv = $form.data('formValidation');
				var res = verifyCode.validate($("#captcha").val())
				if (res) {
					fv.defaultSubmit()
				} else {
					fv.updateMessage("captcha", 'blank', "验证码错误！")
							.updateStatus("captcha", 'INVALID', 'blank');
				}
			});
		}











</script>
